<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon"
          href="">
    <link rel="stylesheet" href="/assets/css/flow.css">
    <title>智能流量</title>
    <!-- 引入GSAP库 -->
    <script src="/assets/js/gsap.min.js"></script>
</head>

<body>
<div class="flow-container">
    <div class="container">
        <div class="line"></div>
        <div class="title">用户概览</div>
        <div class="stat-container">
            <div class="sub-area">
                <div class="title-display">电信</div>
                <div class="group-display">
                    <span class="count-display">0</span>
                    <span class="separator-display">/</span>
                    <span class="count-display">0</span>
                    <span class="separator-display">/</span>
                    <span class="count-display">0</span>
                </div>
            </div>
            <div class="sub-area">
                <div class="title-display">移动</div>
                <div class="group-display">
                    <span class="count-display">0</span>
                    <span class="separator-display">/</span>
                    <span class="count-display">0</span>
                    <span class="separator-display">/</span>
                    <span class="count-display">0</span>
                </div>
            </div>
            <div class="sub-area">
                <div class="title-display">联通</div>
                <div class="group-display">
                    <span class="count-display">0</span>
                    <span class="separator-display">/</span>
                    <span class="count-display">0</span>
                    <span class="separator-display">/</span>
                    <span class="count-display">0</span>
                </div>
            </div>
        </div>
        <div class="stat-container">
            <div class="sub-area">
                <div class="title-display">总计</div>
                <div class="group-display">
                    <span class="count-display">0</span>
                    <span class="separator-display">/</span>
                    <span class="count-display">0</span>
                    <span class="separator-display">/</span>
                    <span class="count-display">0</span>
                </div>
            </div>
            <div class="sub-area">
                <div class="title-display">未知</div>
                <div class="group-display"><span class="count-display">0</span></div>
            </div>
            <div class="sub-area">
                <div class="title-display">沙盒</div>
                <div class="group-display"><span class="count-display">0</span></div>
            </div>
        </div>

        <div class="line"></div>
        <div class="title">网络概览</div>
        <div class="stat-container">
            <div class="sub-area">
                <div class="title-display">电信</div>
                <div class="group-display"><span class="bandwidth-display">0</span><span
                        class="unit-display">Mbps</span>
                </div>
            </div>
            <div class="sub-area">
                <div class="title-display">移动</div>
                <div class="group-display"><span class="bandwidth-display">0</span><span
                        class="unit-display">Mbps</span>
                </div>
            </div>
            <div class="sub-area">
                <div class="title-display">联通</div>
                <div class="group-display"><span class="bandwidth-display">0</span><span
                        class="unit-display">Mbps</span>
                </div>
            </div>
            <div class="sub-area">
                <div class="title-display">沙盒</div>
                <div class="group-display"><span class="bandwidth-display">0</span><span
                        class="unit-display">Mbps</span>
                </div>
            </div>
        </div>

        <div class="line"></div>
        <div class="title">沙盒管理</div>
        <div class="button-box-container">
            <div class="button-box">
                <div class="form-group">
                    <label>
                        <span class="input-label">容器地址:</span>
                        <input type="text" placeholder="容器地址" class="input-field" name="addr">
                        <span class="tip-label">eg. 127.0.0.1</span>
                    </label>
                </div>
            </div>
        </div>

        <div class="button-box-container">
            <div class="button-box">
                <div class="form-group">
                    <label>
                        <span class="input-label">运行时长:</span>
                        <input type="number" placeholder="运行时长(分钟)" class="input-field" name="duration">
                    </label>
                    <label>
                        <span class="input-label">网络速率:</span>
                        <input type="number" placeholder="网络速率(Kb/s)" class="input-field" name="rate">
                    </label>
                    <label>
                        <span class="input-label">设备数量:</span>
                        <input type="number" placeholder="设备数量(台)" class="input-field" name="limit">
                    </label>
                </div>
                <button type="button" class="green-bg action-btn">开始</button>
            </div>

            <form class="button-box">
                <div class="form-group">
                    <label>
                        <span class="input-label">设备UID:</span>
                        <input name="device" type="text" placeholder="UID" class="input-field"
                               style="width: 300px;">
                    </label>
                </div>
                <button type="button" class="yellow-bg">测试</button>
            </form>

            <form class="button-box">
                <button type="button" class="red-bg">停止</button>
            </form>
        </div>
    </div>
</div>
<script src="/assets/js/flow.js"></script>
</body>

</html>